<template>
	<div class="bodyMain">
		<Map page="home">
			<template #tab>
				<Tabs />
			</template>
			<template #left>
				<div class="left">
					<BoxWrap>
						<template #title>医</template>
						<div class="cloth">
							<div class="cloth_left">
								<p>{{ store.errorcashList.length }}</p>
								<p>异常就诊记录</p>
								<div class="middelWear"></div>
								<p>{{ store.apartmentReport.length }}</p>
								<p>单位报告</p>
							</div>
							<div class="cloth_right">
								<div class="dot">警情报警记录</div>
								<div id="clothChart"></div>
							</div>
						</div>
					</BoxWrap>
					<BoxWrap>
						<template #title>食</template>
						<div id="food"></div>
					</BoxWrap>
					<BoxWrap>
						<template #title>住</template>
						<div class="live">
							<div id="liveProcess"></div>
							<div class="livePine">
								<div class="dot liveDot">强制报告案例件数</div>
								<div id="liveChart"></div>
							</div>
						</div>
					</BoxWrap>
				</div>
			</template>
			<template #right>
				<div class="right">
					<BoxWrap>
						<template #title>行</template>
						<div id="weak">
							<ul class="tabs">
								<li>未免票场所</li>
							</ul>
							<div class="line">
								<div class="dot liveDot">预警列表</div>
							</div>
							<div class="tableArea">
								<Table :tableHeader="tableHeader" :tableData="tableData" />
							</div>
						</div>
					</BoxWrap>
					<BoxWrap>
						<template #title>学</template>
						<div id="study">
							<ul>
								<li v-for="(val, index) in studyTabs" :key="index">
									<img :src="`/img/study${index + 1}.png`" />
									<div>
										<p>
											{{ val.name }}
										</p>
										<h5>——</h5>
										<p>
											{{ val.num }}
										</p>
									</div>
								</li>
							</ul>
							<div class="dot liveDot">学校周边持证户类型分布</div>
							<div id="studyBar"></div>
							<div class="dot liveDot">学校周边持证户距离分布</div>
							<div id="studyProcess"></div>
						</div>
					</BoxWrap>
				</div>
			</template>
		</Map>
	</div>
</template>

<script setup lang="ts">
import Tabs from '../components/tabs.vue'
import BoxWrap from '../components/boxWrap.vue'
import { useEcharts } from '../hooks/useEcharts'
import { ref, onMounted, nextTick } from 'vue'
import chartOptions from './componet/chart.js'
import Table from '../components/tableList.vue'
import { deepClone } from '../utils/deepClone'
import Map from '../components/map.vue'
import {
	getErrorcashList,
	getApartmentReport,
	getQinhai,
	getHurt,
} from '../api/home'
import { useUsersStore } from '../store/index'
const store = useUsersStore()
let { process, process2, pine, bar } = new chartOptions()
let clothChart = ref(null)
let studyTabs = ref([
	{
		name: '学校总数',
		num: 91,
	},
	{
		name: '幼儿园',
		num: 520,
	},
	{
		name: '中学',
		num: 32,
	},
	{
		name: '小学',
		num: 20,
	},
])
onMounted(() => {
	init()
	nextTick(() => {
		chartMiddle('clothChart', process()) //警情报警记录
		chartMiddle('food', process2()) //食
		chartMiddle('liveProcess', process()) //住
		chartMiddle('liveChart', pine()) //住
		getCharts()
		chartMiddle('studyProcess', process()) //学
	})
})
const getCharts = () => {
	let option = deepClone(bar())
	option.grid.bottom = 0
	option.grid.top = '10%'
	chartMiddle('studyBar', option) //学
}
const chartMiddle = (id: string, option: object) => {
	let dom = document.getElementById(id)
	let { myecharts, echarts } = useEcharts(dom)
	myecharts.setOption(option)
}
// 初始化页面
const init = () => {
	getErrorcashList().then((res) => {
		store.errorcashList = res
	})
	getApartmentReport().then((res) => {
		store.apartmentReport = res
	})
	getQinhai().then((res) => {
		console.log('被侵害', res)
	})
	getHurt().then((res) => {
		console.log('身体受伤', res)
	})
}
let tableHeader = ref([
	{
		props: 'id',
		name: '编号',
	},
	{
		props: 'time',
		name: '时间',
	},
	{
		props: 'where',
		name: '场所',
	},
	{
		props: 'topic',
		name: '主题',
	},
	{
		props: 'status',
		name: '状态',
	},
])
let tableData = ref([
	{
		id: '001',
		time: '2002-12-3',
		where: '行',
		topic: '未按要求免单',
		status: '未处理',
	},
	{
		id: '002',
		time: '2002-12-3',
		where: '行',
		topic: '未按要求免单',
		status: '未处理',
	},
	{
		id: '003',
		time: '2002-12-3',
		where: '行',
		topic: '未按要求免单',
		status: '未处理',
	},
])
</script>

<style lang="less" scoped>
.bodyMain {
	// margin: 30px 44px;
	height: calc(100% - 120px);
	.left {
		margin-left: 44px;
	}
	.right {
		margin-right: 44px;
	}
	.left,
	.right {
		width: 510px;
		> div {
			height: 225px;
			margin-top: 29px;
		}
	}
	.right {
		> div {
			&:last-child {
				height: 480px;
			}
		}
	}
	.cloth {
		font-size: 10px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		display: flex;
		justify-content: space-around;
		.cloth_left {
			text-align: center;
			width: 86px;

			line-height: 30px;
			.middelWear {
				height: 10px;
				border-left: 1px solid #d9c871;
				border-right: 1px solid #d9c871;
			}
		}
		.cloth_right {
			#clothChart {
				width: 300px;
				height: 150px;
			}
		}
	}
	#food {
		height: 150px;
		width: 100%;
	}
	.live {
		display: flex;
		height: 150px;
		> div {
			flex: 1;
		}
		.livePine {
			font-size: 10px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;
			#liveChart {
				width: 100%;
				height: 150px;
			}
		}
	}
	#weak {
		height: 150px;
		.line {
			display: flex;
			justify-content: center;
		}
		.liveDot {
			color: #8799c0;
			&::before {
				background-color: #369ad5;
			}
		}
		.tabs {
			display: flex;
			font-size: 14px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
			li {
				padding: 2px 8px;
				border-bottom: 1px solid #00ccfc;
			}
		}
		.tableArea {
			height: 100px;
		}
	}
	#study {
		ul {
			margin-top: 5px;
			margin-bottom: 5px;
			display: flex;
			justify-content: space-between;
			li {
				display: flex;
				align-items: center;
				div {
					text-align: center;
					h5 {
						color: #0b244c;
					}
					p {
						font-size: 12px;
						color: #ffffff;
						&:last-child {
							font-size: 14px;
						}
					}
				}
			}
		}
		#studyBar {
			margin-top: 5px;
			height: 150px;
		}
		#studyProcess {
			margin-top: 5px;
			height: 150px;
		}
	}
}
.dot {
	position: relative;
	color: #ffffff;
	font-size: 14px;
	&::before {
		position: absolute;
		left: -10px;
		top: 50%;
		transform: translateY(-50%);
		content: '';
		width: 5px;
		height: 5px;
		border-radius: 5px;
		background-color: #d9c871;
	}
}
.liveDot {
	color: #8799c0;
	&::before {
		background-color: #369ad5;
	}
}
</style>
